<template>
  <div>
    <basic-container>
      <avue-data-tabs :option="option"></avue-data-tabs>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="系统架构" name="1">
          <div>主后端基于Spring Cloud 2020、Spring Boot 2.4.构建微服务</div>
          <div>从后端基于PHP5开发</div>
          <div>支持docker部署</div>
        </el-collapse-item>
        <el-collapse-item title="后端框架&技术选型" name="2">
          <div>网关 SpringCloud GateWay</div>
          <div>安全 Spring Security OAuth 2.0</div>
          <div>服务中心 Nacos</div>
          <div>服务监控 SpringBootAdmin</div>
          <div>流量控制 Sentinel</div>
          <div>...还有更多组件框架未列出</div>
        </el-collapse-item>
        <el-collapse-item title="前端架构" name="3">
          <div>Vue2.0 + Element构建</div>
          <div>实现独立的表单设计器、表单渲染器</div>
          <div>丰富的图表引用渲染</div>
          <div>基于JS的数据导入导出</div>
        </el-collapse-item>
        <el-collapse-item title="更多特性" name="4">
          <div>深度定制 Spring Cloud Alibaba 便于开发使用</div>
          <div>完善监控流程，支持微服务全组件接入监控</div>
          <div>支持多数据源，支持集群部署</div>
        </el-collapse-item>
      </el-collapse>
    </basic-container>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'wel',
  data(){
    return{
      activeNames:["1","2","3","4"],
      option: {
        data: [
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            title: '浏览统计',
            subtitle: '实时',
            count: 71,
            allcount: 334,
            text: '当前分类总记录数',
            color: 'rgb(27, 201, 142)',
            key: '份'
          },
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            title: '回收统计',
            subtitle: '实时',
            count: 311,
            allcount: 1022,
            text: '当前回收的问卷数',
            color: 'rgb(230, 71, 88)',
            key: '份'
          },
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            title: '日志统计',
            subtitle: '实时',
            count: 908,
            allcount: 10222,
            text: '记录次数',
            color: 'rgb(178, 159, 255)',
            key: '条'
          }
        ]
      }
    }
  }
}
</script>

<style scoped="scoped" lang="scss">
.wel-contailer {
  position: relative;
}

.banner-text {
  position: relative;
  padding: 0 20px;
  font-size: 20px;
  text-align: center;
  color: #333;
}

.banner-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  display: none;
}

.actor {
  height: 250px;
  overflow: hidden;
  font-size: 18px;
  color: #333;
}

.actor:after {
  content: '';
  width: 3px;
  height: 25px;
  vertical-align: -5px;
  margin-left: 5px;
  background-color: #333;
  display: inline-block;
  animation: blink 0.4s infinite alternate;
}

.typeing:after {
  animation: none;
}

@keyframes blink {
  to {
    opacity: 0;
  }
}
</style>
